import BaseApp from '@/lib/base/BaseApp';
import Component from 'vue-class-component';
@Component
class App extends BaseApp {
    private progress = 0;

    private loadingImg = require('../../../assets/images/loading.gif')
    public render() {
        return (
            <div class="app">
                <img class="loading" src={this.loadingImg} alt="" />
                <div class="progress">
                    <div class="progress-val" style={{ transform: `scaleX(${this.progress / 100})` }}></div>
                    <div class="progress-val-number" style={{ left: `${this.progress}%` }}>{this.progress}%</div>
                </div>
            </div>
        )
    }

    public apiready() {
        const config = api.pageParam;

        this.$emitter.onSystem({ name: 'navitembtn' }, (res) => {

            if (res.type !== 'left') {
                return;
            }
            if (res.index === 1) {
                this.$apicloud.closeWin();
                return;

            }
            api.historyBack({
                frameName: config.name
            }, (ret) => {
                if (!ret.status) {
                    this.$apicloud.closeWin();
                }
            });
        })
        // 监听android返回按钮事件
        this.$emitter.onSystem({
            name: 'keyback'
        }, (ret) => {
            api.historyBack({
                frameName: config.name
            }, (ret) => {
                if (!ret.status) {
                    this.$apicloud.closeWin();
                }
            });

        });

        api.setFrameClient({
            frameName: config.name
        }, (ret, err) => {
            if (!ret) {
                this.onLoadError(err);
                return;
            }
            switch (ret.state) {
                case 0:
                    // 开始加载
                    this.onStartLoad(ret.url);
                    break;
                case 1:
                    // 加载进度
                    this.onProgress(ret.progress);
                    break;
                case 2:
                    // 结束加载
                    this.onEndLoad(ret.url);
                    break;
                case 3:
                    // 标题发生改变
                    this.onTitleChange(ret.title);
                    break;
                case 4:
                    // 地址发生改变
                    this.onUrlChange(ret.url);
                    break;
                default:
                    break;
            }
        });
        api.openFrame({
            ...config,
            fixedOn: 'ui_window',
            bgColor: '#f5f5f5'
        });

    }
    /**
     * 开始加载
     */
    private onStartLoad(url: string) {

    }

    /**
     * 加载进度
     * @param progress 
     */
    private onProgress(progress: number) {
        this.progress = progress;
    }
    /**
     * 结束加载
     */
    private onEndLoad(url: string) {
    }
    /**
     * 标题发生改变
     * @param title 
     */
    private onTitleChange(title: string) {
        const config = api.pageParam;
        if (config.navigationBar && !config.title) {
            api.setTabLayoutAttr({
                title
            });
        }

    }
    /**
     *  地址发生改变
     * @param url 
     */
    private onUrlChange(url: string) {

    }
    /**
     * 加载出错
     */
    private onLoadError(error: any) {
    }
}
